@include b('attachment-viewer-column-content') {
  display: flex;
  flex-wrap: wrap;
  gap: getCssVar('spacing', 'extra-tight');
  width: 100%;
}

@include b('attachment-viewer-column-file-item') {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-height: getCssVar('height-control', 'default');
  max-height: getCssVar('height-control', 'default');
  color: getCssVar('color', 'primary');

  @include e('caption') {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include e('img') {
    width: auto;
    max-width: getCssVar('height-control', 'default');
    max-height: getCssVar('height-control', 'default');
    cursor: zoom-in;
  }

  &:has(.#{bem('attachment-viewer-column-file-item__caption')}) {
    min-height: auto;
  }
}